<template>
  <BorderBox11 :title="$t('ems.extrusionMix')">
    <div class="top5">
      <div class="top5-content">
        <!-- 混料 -->
        <div class="one-div">
          <div class="mixed" v-for="(item,index) in props.mixDataList" :key="index">
            <p :class="item.CurrentStatus==='InProduction'?'mixed-cicle2':item.CurrentStatus==='Running'?'mixed-cicle3':item.CurrentStatus==='PowerOn'?'mixed-cicle4':item.CurrentStatus==='BreakDown'?'mixed-cicle5':'mixed-cicle'"></p>
            <div :class="item.CurrentStatus==='InProduction'?'div-content2':item.CurrentStatus==='Running'?'div-content3':item.CurrentStatus==='PowerOn'?'div-content4':item.CurrentStatus==='BreakDown'?'div-content5':'div-content'">
              <span style="margin-right: 60px">{{ item?.LineName }}</span>
              <span></span>
              <span>{{ item?.Duration }}</span>
            </div>
          </div>
        </div>
        <!-- 挤出list -->
        <ul class="ul-list">
          <li v-for="(item,index) in props.jcDataList" :key="index">
            <div :class="item.CurrentStatus==='InProduction'?'cicle2':item.CurrentStatus==='Running'?'cicle3':item.CurrentStatus==='PowerOn'?'cicle4':item.CurrentStatus==='BreakDown'?'cicle5':'cicle'"></div>
            <div :class="item.CurrentStatus==='InProduction'?'li-content2':item.CurrentStatus==='Running'?'li-content3':item.CurrentStatus==='PowerOn'?'li-content4':item.CurrentStatus==='BreakDown'?'li-content5':'li-content'">
              <span style="margin-right: 15px">{{ item?.LineName }}</span>
              <span></span>
              <span>{{ item?.Duration }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </BorderBox11>
</template>

<script setup>
import { defineProps, onMounted, watch } from 'vue'
import iconFont from '@/components/IconFont/iconFont'
import $ from 'jquery'
import { BorderBox11 } from 'datav-vue3'

const props = defineProps({
  title: { type: String },
  num: {
    type: Number
  },
  jcDataList: {
    type: Array
  },
  mixDataList: {
    type: Array
  }
})
watch(() => [props.title, props.jcDataList, props.mixDataList], () => {
  // console.log(props.title)
})

onMounted(() => {
})
</script>

<style scoped lang="scss">
.top5 {
  height: 100%;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.top5 .top5-title {
  width: 100%;
  height: 40px;
  background: url('@/assets/images/title.png') no-repeat center;
  background-size: 100%;
  color: #fff;
  text-align: center;
  display: table;
  font-size: 20px;
}

.top5 .top5-title span {
  display: table-cell;
  vertical-align: middle;
}

.top5 .top5-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 25px;
  box-sizing: border-box;
  overflow: hidden;
}

.top5 .top5-content .one-div {
  width: 100%;
  height: 15%;
  box-sizing: border-box;
  padding: 15px 10px 0 10px;
  margin-top: 10px;
}

// 混料
.mixed {
  width: 100%;
  height: 100%;
  position: relative;
  float: left;
}

.top5 .top5-content div .mixed .mixed-cicle {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  background: url('@/assets/images/orange.png') no-repeat center;
  background-size: 100%;
  left: 0px;
  bottom: 5px;
  animation: rotate 5s infinite linear;
}

.top5 .top5-content div .mixed .mixed-cicle2 {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  background: url('@/assets/images/green.png') no-repeat center;
  background-size: 100%;
  left: 0px;
  bottom: 5px;
  animation: rotate 5s infinite linear;
}

.top5 .top5-content div .mixed .mixed-cicle3 {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  background: url('@/assets/images/green2.png') no-repeat center;
  background-size: 100%;
  left: 0px;
  bottom: 5px;
  animation: rotate 5s infinite linear;
}

.top5 .top5-content div .mixed .mixed-cicle4 {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  background: url('@/assets/images/blue.png') no-repeat center;
  background-size: 100%;
  left: 0px;
  bottom: 5px;
  animation: rotate 5s infinite linear;
}

.top5 .top5-content div .mixed .mixed-cicle5 {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  background: url('@/assets/images/red.png') no-repeat center;
  background-size: 100%;
  left: 0px;
  bottom: 5px;
  animation: rotate 5s infinite linear;
}

.top5 .top5-content div .mixed .div-content {
  width: 100%;
  height: 100%;
  background: url('@/assets/images/border2.png') no-repeat center;
  background-size: 95% 95%;
  font-size: 17px;
  padding-top: 3%;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  margin-left: 10px;
  overflow: hidden;
}

.top5 .top5-content div .mixed .div-content2 {
  width: 100%;
  height: 100%;
  background: url('@/assets/images/border.png') no-repeat center;
  background-size: 95% 90%;
  font-size: 15px;
  padding-left: 17%;
  padding-top: 3%;
  color: #fff;
  box-sizing: border-box;
  margin-left: 10px;
  overflow: hidden;
}

.top5 .top5-content div .mixed .div-content3 {
  width: 100%;
  height: 100%;
  background: url('@/assets/images/border3.png') no-repeat center;
  background-size: 95% 90%;
  font-size: 15px;
  padding-left: 17%;
  padding-top: 3%;
  color: #fff;
  box-sizing: border-box;
  margin-left: 10px;
  overflow: hidden;
}
.top5 .top5-content div .mixed .div-content4 {
  width: 100%;
  height: 100%;
  background: url('@/assets/images/border4.png') no-repeat center;
  background-size: 95% 90%;
  font-size: 15px;
  padding-left: 17%;
  padding-top: 3%;
  color: #fff;
  box-sizing: border-box;
  margin-left: 10px;
  overflow: hidden;
}
.top5 .top5-content div .mixed .div-content5 {
  width: 100%;
  height: 100%;
  background: url('@/assets/images/border5.png') no-repeat center;
  background-size: 95% 90%;
  font-size: 15px;
  padding-left: 17%;
  padding-top: 3%;
  color: #fff;
  box-sizing: border-box;
  margin-left: 10px;
  overflow: hidden;
}
// ul列表
.top5 .top5-content div ul li .li-content {
  width: 100%;
  height: 100%;
  background: url('@/assets/images/border2.png') no-repeat center;
  background-size: contain;
  font-size: 15px;
  padding-left: 17%;
  padding-top: 10%;
  color: #fff;
  box-sizing: border-box;
  margin-left: 10px;
  overflow: hidden;
}

.top5 .top5-content ul {
  flex: 1;
  overflow: hidden;
  box-sizing: border-box;
}

.top5 .top5-content ul li:nth-child(odd) {
  width: 42%;
  height: 19%;
  margin: 5px 40px 0 20px;
  position: relative;
  float: left;
}

.top5 .top5-content ul li {
  width: 42%;
  height: 18%;
  margin: 5px 0 0 0;
  position: relative;
  float: left;
}

.top5 .top5-content ul li .li-content {
  width: 100%;
  height: 100%;
  background: url('@/assets/images/border2.png') no-repeat center;
  background-size: contain;
  font-size: 15px;
  padding-left: 17%;
  padding-top: 10%;
  color: #fff;
  box-sizing: border-box;
  margin-left: 10px;
  overflow: hidden;
}

.top5 .top5-content ul li .li-content span {
  margin-right: 2%;
}

.top5 .top5-content ul li .cicle {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  background: url('@/assets/images/orange.png') no-repeat center;
  background-size: 100%;
  left: -12px;
  bottom: 10px;
  animation: rotate 5s infinite linear;
}

.top5 .top5-content ul li .li-content2 {
  width: 100%;
  height: 100%;
  background: url('@/assets/images/border.png') no-repeat center;
  background-size: contain;
  font-size: 15px;
  padding-left: 17%;
  padding-top: 10%;
  color: #fff;
  box-sizing: border-box;
  margin-left: 10px;
  overflow: hidden;
}

.top5 .top5-content ul li .li-content3 {
  width: 100%;
  height: 100%;
  background: url('@/assets/images/border3.png') no-repeat center;
  background-size: contain;
  font-size: 15px;
  padding-left: 17%;
  padding-top: 10%;
  color: #fff;
  box-sizing: border-box;
  margin-left: 10px;
  overflow: hidden;
}

.top5 .top5-content ul li .li-content4 {
  width: 100%;
  height: 100%;
  background: url('@/assets/images/border4.png') no-repeat center;
  background-size: contain;
  font-size: 15px;
  padding-left: 17%;
  padding-top: 10%;
  color: #fff;
  box-sizing: border-box;
  margin-left: 10px;
  overflow: hidden;
}

.top5 .top5-content ul li .li-content5 {
  width: 100%;
  height: 100%;
  background: url('@/assets/images/border5.png') no-repeat center;
  background-size: contain;
  font-size: 15px;
  padding-left: 17%;
  padding-top: 10%;
  color: #fff;
  box-sizing: border-box;
  margin-left: 10px;
  overflow: hidden;
}

.top5 .top5-content ul li .cicle2 {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  background: url('@/assets/images/green.png') no-repeat center;
  background-size: 100%;
  left: -12px;
  bottom: 10px;
  animation: rotate 5s infinite linear;
}

.top5 .top5-content ul li .cicle3 {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  background: url('@/assets/images/green2.png') no-repeat center;
  background-size: 100%;
  left: -12px;
  bottom: 10px;
  animation: rotate 5s infinite linear;
}

.top5 .top5-content ul li .cicle4 {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  background: url('@/assets/images/blue.png') no-repeat center;
  background-size: 100%;
  left: -12px;
  bottom: 10px;
  animation: rotate 5s infinite linear;
}

.top5 .top5-content ul li .cicle5 {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  background: url('@/assets/images/red.png') no-repeat center;
  background-size: 100%;
  left: -12px;
  bottom: 10px;
  animation: rotate 5s infinite linear;
}

@keyframes rotate {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
